<script setup lang="ts">
import { isLoading } from './utils/loading';
</script>

<template>
  <div id="app">
    <!-- 加载中提示 -->
    <div v-if="isLoading" class="loading-overlay">
      <div class="loading-spinner"></div>
      <p>loading...</p>
    </div>
  </div>

  <!-- 路由视图 -->
  <router-view />
</template>

<style scoped lang="scss">
.loading-overlay{
  position: fixed; /* 固定定位，避免随页面滚动 */
  top: 0; /* 覆盖整个页面 */
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8); /* 半透明背景 */
  display: flex; /* 使用flex布局居中 */
  flex-direction: column; /* 垂直排列 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  z-index: 999; /* 确保在最上层 */
}
.loading-spinner {
  width:0.4rem; 
  height:0.4rem;
  border:0.4rem solid #f3f3f3;
  border-top: 0.4ren solid #3498db; /* 深色顶部边框 */
  border-radius: 50%; /* 圆形 */
  animation: spin 1s linear infinite; /* 旋转动画 */
  margin-bottom: 0.61; /* 与文字保持距离 */
}
/* 旋转动画定义 */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

</style>
